
<template>
  <!-- 词云图 -->
  <div ref="fullScreenBox" id="wordCloud"  class="chart"></div>
</template>
<script>
import {mapState} from 'vuex'
import Ecolors from '@/utils/chartColors'
import {resize, spaceTxt } from '@/utils/utils'
import 'echarts-wordcloud'
let chart = {}
export default {
  mixins: [resize],
  props: {
    chartId: {
      type: String
    },
    chartData: {
      type:Array
    }
  },
  data() {
    return {
      info: {},
      mchartData: [],
      chart: null,
      colors: [],
    }
  },
  computed: {
    ...mapState(['curChartConfig'])
  },
  watch: {
    chartData(val) {
      // this.mchartData = val;
      this.getData()
    }
  }, 
  mounted () {
    // this.mchartData = this.chartData;
    this.getData()
  },
  methods: {
    //这里获取到数据 将数据结构化为数组对象   [{name:"词1",value:100},{name:"词2",value:99}] 此处的key 一定是name 与 value 
    getData() {
      this.mchartData = [] ;
      this.chartData && this.chartData.map(item => {
        if (item.key) {
          this.mchartData.push({
            name:item.key,
            value:item.doc_count,
          });
        }
      });
      //渲染词云图
      this.renderChart();
    },

    //渲染词云图
    renderChart() {
      chart = this.$echarts.init(document.getElementById("wordCloud"));
      this.$emit("domRef", document.getElementById("wordCloud"))
      // let valArr = this.mchartData.map(v => v.doc_count);
      // let min = Math.min(...valArr);
      // let max = Math.max(...valArr);
      // let mathLog = Math.log(max) === 0 ? 
      //   1 : Math.log(min)/Math.log(max) === 0 ?
      //   1 : Math.log(min)/Math.log(max); // Math.log(1)为0，需要判断底数不为0，同时如果结果为0，则置为1，方便后续计算
      let option = {
        backgroundColor: "#fff",
        series: [
          {
            type: 'wordCloud',
            // shape: function shapeSquare(theta){
            //   return Math.min(
            //     1 / Math.abs(Math.cos(theta)),
            //     1 / Math.abs(Math.sin(theta)),
            //   )
            // },
            shape: 'circle', 
            left: 'center',
            top: 'center',
            width: '90%',
            height: '90%',
            right: null,
            bottom: null,
            sizeRange: [16, 80], // fontSize大小
            textRotation: [0, 0],
            rotationRange: [0,0],
            gridSize: 10,
            drawOutOfBound: false, // 是否允许绘制到图表外
            shrinkToFit: true, // 是否收缩文本。如果将其设置为false，则文本将不渲染。如果设置为true，则文本将被缩小。
            layoutAnimation: false,
            textStyle: {
              fontFamily: 'sans-serif',
              fontWeight: "bold",
              cursor: 'default',
              color: function() {
                let str = 'rgb(' + [
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160),
                  Math.round(Math.random() * 160),
                ].join(',') + ')'
                return str
              }
            },
            emphasis: {
              focus: 'self',
              textStyle: {
                shadowBlur: 10,
                shadowColor: '#333'
              }
            },
            data: this.mchartData
          }
        ]
      };
      chart.clear();
      chart.setOption(option);
      // 后台报告下载
      this.$emit('chartDom', chart);

      // 后台报告下载
      chart.on('finished', () => {
        this.getEchartImg(chart.getDataURL());
      });
    },
    getEchartImg(base) {
      window.echartImg = base;
    }
  },

  destroyed() {
    chart.dispose();
    chart = null;
  }

}
</script>

<style lang="scss" scoped>
#wordCloud {
  width: 100%;
  height: 500px;
}
</style>



